<template>
  <!-- 后台主页布局 -->
  <div class="common-layout">
    <el-container>
      <el-header class="top">ERP-欢乐斗地主小组</el-header>
      <el-container   >
        <el-aside width="240px" class="left">
          系统菜单

          <!--添加Menu菜单组件-->
          <el-menu
              class="el-menu-vertical-demo" @select="handlerSelect" >
            <el-sub-menu v-for="menu in menus" :key="menu.id"   :index="menu.id">
              <template #title>
                <span>{{menu.label}}</span>
              </template>
              <el-menu-item v-for="subMenu in menu.subMenus" :key="subMenu.id" :index="subMenu.id">
                {{subMenu.label }}
              </el-menu-item>
             
            </el-sub-menu>

          </el-menu>
        </el-aside>
        <el-main class="right">
            <!--通过点击左边菜单，动态显示不同组件 -->
<!--           <component :is="currentComponent"></component>-->
          <component :is="currentComponent"></component>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script setup>
  import AddCustomer from "@/views/AddCustomer";
  import ListCustomer from "@/views/ListCustomer";
  import {onMounted, ref} from "vue";
  import axios from 'axios';
import AddShellJh from "./AddShellJh.vue";
import ListSellJh from "./ListSellJh.vue";
import ListCustOrder from "./ListCustOrder.vue";
import ListAfterSale from "./ListAfterSale.vue";
import AddMenusVue from "./AddMenus.vue";
import RolerManager from "./RolerManager.vue";
import UserManagerVue from "./UserManager.vue";
import CategoryManagerVue from "./CategoryManager.vue";
import ItemMangerVue from "./ItemManger.vue";
import BusyListManager from "./BuyListMnager.vue"
import InStoreList from "./InStoreList.vue";
import ListOutStore from "./ListOutStore.vue"
import listStore from "./ListStore.vue"
import CustomerArea from "./CustomerArea.vue"
import YearMonthCount from "./YearMonthCount.vue"
import EmployeeCount from '@/views/EmployeeCount'
import YearNumCount from '@/views/YearNumCount';
import AfterSaleCount from '@/views/AfterSaleCount'
  //声明数组保存所有组件
  const views=[AddCustomer,ListCustomer,ListAfterSale,ListCustOrder,AddShellJh,CustomerArea,YearMonthCount,ListSellJh,AddMenusVue,UserManagerVue,RolerManager,,,,CategoryManagerVue,ItemMangerVue,BusyListManager,InStoreList,ListOutStore,listStore,EmployeeCount,AfterSaleCount,YearNumCount]
  //声明变量保存当前需要显示的组件名
  const currentComponent=ref(views[0]);
  //声明菜单对象集合数据
  const menus=ref([]);
  /*menu组件选中叶子节点触发的函数，参数index：菜单节点的index值，对应数据库菜单节点的id*/
  const  handlerSelect=function(index){
    console.log(index);
 
     
      axios.get("http://localhost:8081/compIndex?id="+index)
      .then(
        (response)=>{currentComponent.value=views[response.data];}
      )
      .catch(
        (error)=>{
          console.log(error);
        }
      )

  }
 
onMounted(function(){

axios.get("http://localhost:8081/listMenus")
.then((res)=>{

  menus.value=res.data;
})
.catch((error)=>{
  console.log(error);
})
})


</script>

<style scoped>
  .top{
    background-color: azure;
    padding-top: 15px;
  }
  .left{
    background-color: blanchedalmond;
    height: 600px;
  }
  .right{
    background-color: cornsilk;
  }

</style>